<template>
    <div class="top_bar">
        <div class="logo"><img src="https://bu.dusays.com/2024/09/28/66f7782a0e175.png" alt=""></div>
        <div class="search">
            <el-input v-model="search_input" placeholder="热门商品" :prefix-icon="Search" />
            <div class="search_btn">
                <v-btn class="search_btn_v" :ripple="false" height="5vh" min-width="12vh">
                    <v-avatar size="40" image="https://bu.dusays.com/2024/10/31/67231ef608442.png"></v-avatar>
                </v-btn>
            </div>
        </div>
    </div>
    <div class="body">
        <div class="submit_box">
            <div class="left">
                <div class="address_box">
                    <div class="title" style="margin-left: 2vh;font-weight:bold;display: flex;"><span
                            style="margin-top: 2vh;">确认收货地址</span></div>
                    <div style="display: flex;gap:1vh;">
                        <div @click="selectAddress(item)" v-for="item in otherAddresses" :key="item.addressId"
                            class="Address_card" style="margin-top: 5vh;">
                            <div class="Address_up" style="margin-left: 1vh;margin-top: 1vh;">
                                <span style="font-weight: bold;font-size: 1.2vh;">{{ item.recipientName
                                }}&nbsp;&nbsp;&nbsp;</span>
                                <span style="font-size: 1.2vh;color: gray;">{{ item.phoneNumber }}</span>
                            </div>
                            <div class="Address_down" style="margin-left: 1vh;">
                                <h1
                                    style="font-size: 1.2vh;color: gray;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;font-weight: normal;">
                                    {{ item.province }}&nbsp;{{ item.city
                                    }}&nbsp;{{ item.district }}&nbsp;{{ item.detailAddress }}</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order_box">
                    <div class="title" style="margin-left: 2vh;font-weight: bold;display: flex;"><span
                            style="margin-top: 2vh;">确认订单信息</span></div>
                    <div class="order_head"
                        style="display: flex;justify-content:space-around;align-items: center;margin-top: 2vh;">
                        <h4>店铺宝贝</h4>
                        <h4></h4>
                        <h4></h4>
                        <h4></h4>
                        <h4></h4>
                        <h4>商品属性</h4>
                        <h4>原价</h4>
                        <h4>数量</h4>
                        <h4>小计</h4>
                    </div>
                    <div class="order_body">
                        <div class="itemRoom"
                            style="display: flex;background-color: rgb(221, 221, 221);border-radius: 5px 5px 0 0;height: 4vh;justify-content: flex-start;align-items: center;">
                            <h4 style="color: black;margin-left: 5vh;">盛楠果蔬农场</h4>
                        </div>
                        <div class="item_card"
                            style="background-color: rgb(250, 250, 250);width: 100%;border-radius:5px;display: flex;justify-content:space-around;align-items: center;gap: 0vh;margin-top: 1vh;">
                            <el-image style="width: 100px; height: 100px;border-radius: 10px;margin-bottom: 1vh;"
                                :src="`https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/商品列表/List/${items.itemImg}.jpg`"
                                fit="cover" />
                            <h5 style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 16vh;">
                                {{ items.itemName }}</h5>
                            <h5>规格：{{ items.itemPrice }} {{ items.itemUnit }}</h5>
                            <h5>￥{{ items.itemPrice }}</h5>
                            <h5>{{ buyNum }}</h5>
                            <h5 style="color: red;">￥{{ totalPrice }}</h5>
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="desc_box">
                    <div class="title"
                        style="display: flex;border-radius: 10px;background: linear-gradient(to bottom, #ffeacb, #ffffff);">
                        <span style="margin-top: 1vh;margin-left: 2vh;font-size: 3vh;font-weight: bold;">付款详情<span
                                style="font-size: 1vh;margin-left: 1vh;">共1件商品</span></span></div>
                    <div class="item_totalPrice" style="display:flex;justify-content: space-between;">
                        <span style="font-weight: bold;margin: 0 2vh;">商品总价</span>
                        <span style="font-weight: bold;margin: 0 2vh;color:rgb(247, 114, 37);">￥{{ totalPrice }}</span>
                    </div>
                    <div class="user_info" style="display:flex;justify-content: space-between;margin-top: 2vh;">
                        <span>收获地址</span>
                        <span>{{ userAddress }}</span>
                    </div>
                    <div class="user_info" style="display:flex;justify-content: space-between;margin-top: 2vh;">
                        <span>收货人信息</span>
                        <span>{{ userName }}</span>
                    </div>
                    <div class="user_info" style="display:flex;justify-content: space-between;margin-top: 2vh;">
                        <span>收货人手机号</span>
                        <span>{{ userPhone }}</span>
                    </div>
                    <div class="submit"
                        style="display: flex;margin-top: 4vh;margin-left: 2vh;margin-right: 2vh;justify-content: space-between;">
                        <div class="pay">
                            <div style="margin-left:0.5vh;">实付款</div>
                            <div style="color:rgb(247, 114, 37);font-size: 3vh;">￥{{ totalPrice }}</div>
                        </div>
                        <div class="btn" style="margin-top: 1vh;">
                            <el-button @click="submitOrder" type="primary">提交订单</el-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { onMounted } from "vue";
import request from '../../utils/request';
import { reactive } from "vue";
import { useRoute } from "vue-router";
import { computed } from 'vue';
import { ElNotification } from 'element-plus';
import router from '../../router/index.js'

const UserAddressUID = ref(0);

const otherAddresses = ref([]);

const items = ref([])

const buyNum = ref(null)
const totalPrice = ref(null)

//收货人信息
const userAddress = ref("广州新华学院东莞校区");
const userName = ref("颜昭棋");
const userPhone = ref("18038983770");

const selectAddress = (item) => {
    userAddress.value = item.detailAddress;
    userName.value = item.recipientName;
    userPhone.value = item.phoneNumber;
}

const submitOrder = () => {
    console.log("提交订单");
    const order = ref({});
    order.value.uid = UserAddressUID.value;
    order.value.orderStatus = "待支付";
    order.value.totalAmount = totalPrice.value;
    order.value.trackingNumber = "暂无";
    order.value.itemId = items.value.itemID;
    order.value.quantity = buyNum.value;
    order.value.address = userAddress.value;
    var now = new Date();
    order.value.createdAt = now.toISOString();
    request.post("/api/order/SubmitOrder", order.value).then(res => {
        console.log(res);
        ElNotification({
            title: '成功',
            message: '订单提交成功',
            type: 'success',
        })
        setTimeout(() => {
            router.push(`/pay/${res.data}`)
        }, 1000)
    })
        .catch(error => {
            console.error("订单提交失败", error);
            ElNotification({
                title: '失败',
                message: '订单提交失败',
                type: 'error',
            })
        })
}


onMounted(async () => {

    const route = useRoute();
    const itemId = route.params.itemId;
    buyNum.value = route.params.buyNum;


    try {
        const uid = sessionStorage.getItem('uid');
        const uidObj = JSON.parse(uid);
        UserAddressUID.value = uidObj;
        console.log("我是用户第" + UserAddressUID.value + "号");

        const addressRes = await
            request.get(`/api/user/selectUserAddressAll/${UserAddressUID.value}`).then(res => {
                otherAddresses.value = res.data;
                console.log(otherAddresses.value);
            }).catch(error => {
                console.error('请求失败:', error);
            })

        const itemRes = await
            request.get(`/api/item/selectItemById/${itemId}`).then(res => {
                items.value = res.data;
                console.log(items.value);
            }).catch(error => {
                console.error('请求失败:', error);
            })

    } catch (error) {
        console.error("请求失败", error);
        ElMessage.error("数据加载失败");
    }
    totalPrice.value = items.value.itemPrice * buyNum.value;
    if(buyNum.value == "free"){
        totalPrice.value = 0;
        buyNum.value = 1;
    }
});


</script>

<style scoped>
.top_bar {
    width: 100%;
    height: 10vh;
    /* background-color: wheat; */
    display: flex;
}

.top_bar img {
    width: 20vh;
    height: auto;
    margin-left: 20vh;
}

.top_bar .search {
    width: 100vh;
    margin: auto;
    margin-left: 10vh;
    display: flex;
}

.search_btn {
    display: flex;
}

.search .search_btn .search_btn_v {
    background-color: green;
    font-size: 2vh;
    font-weight: bold;
}

.body {
    width: 100%;
    height: 100vh;
    background-color: rgb(226, 226, 226);
    display: flex;
}

.submit_box {
    width: 80%;
    height: 95%;
    background-color: rgb(226, 226, 226);
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.left {
    width: 65%;
    height: 100%;
    background-color: rgb(226, 226, 226);
}

.left .address_box {
    width: 100%;
    height: 24%;
    background-color: white;
    border-radius: 10px;
}

.Address_card {
    margin-left: 2vh;
    border: 1.5px rgb(177, 177, 177) solid;
    border-radius: 5px;
    width: 20vh;
    height: 8vh;
}

.Address_card:hover {
    border: 1.5px rgb(243, 111, 3) solid;
}

.left .order_box {
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    margin-top: 2vh;
}

.order_head {
    background-color: rgb(235, 235, 235);
    width: 90%;
    height: 5vh;
    border-radius: 10px;
    margin: auto;
}

.order_body {
    width: 90%;
    margin: auto;
    margin-top: 2vh;
}

.order_body .item_card {
    width: 90%;
    margin: auto;
}


.right {
    width: 33%;
    height: 45%;
    background-color: white;
    border-radius: 10px;
}

.user_info {
    display: flex;
    justify-content: space-between;
}

.user_info span:nth-child(1) {
    font-weight: bold;
    margin: 0 2vh;
}

.user_info span:nth-child(2) {
    color: rgb(85, 85, 85);
    font-weight: normal;
    margin: 0 2vh;
}</style>